<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账号信息</title>

    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/eui/element-ui.css">

    <script src="../static/js/vue.min.js"></script>
    <script src="../static/js/axios.min.js"></script>
    <script src="../static/eui/index.js"></script>

    <script src="../static/js/App.js"></script>
    <script src="../static/js/auth.js"></script>
    <script src="../static/js/checkIsLogin.js"></script>
    <script src="../static/js/FormBoxComponent.js"></script>
    <script src="../static/js/DataListComponent.js"></script>
    <script src="../static/js/RefreshComponent.js"></script>

    <link rel="stylesheet" href="../static/css/template.css">
</head>
<body>
<div id="app">
    <refresh-comm></refresh-comm>
    <!--引用form-box-comm组件-->
    <form-box-comm ref="myForm"
                   :form-type="1"
                   :box-title="boxTitle"
                   :edit-api-url="url+'/updateCurrentUser'"
                   :model="model"
                   :id-key="model.id"
                   :on-validate="formValidateHandler"
                   :on-success="successHandler">

        <!--添加自己的元素-->
        <template>
            <div class="item">
                <label for="name">用户名称：</label>
                <input id="name" disabled="disabled" v-model="model.name">
            </div>
            <div class="item" style="background-color: gainsboro"> <label>修改密码</label></div>
            <div class="item">
                <label for="passw">旧密码：</label>
                <input type="password" id="passw" v-model="model.passw">
            </div>
            <div class="item">
                <label for="newPassw">新密码：</label>
                <input type="password" id="newPassw" v-model="model.newPassw">
            </div>
            <div class="item">
                <label for="newPasswConfirm">新密码确认：</label>
                <input type="password" id="newPasswConfirm" v-model="model.newPasswConfirm">
            </div>
        </template>
        <!--添加自己的元素 结束-->
    </form-box-comm>


</div>
<script>

    let vue = new Vue({
        el: "#app",
        data: {
            boxTitle: '账号信息-修改密码',
            url: global_api_url + "user",
            //表单的对象
            // 表单的对象不一定和列表表单字段一样，所以单独定义
            model: {
                id:-1,
                name: global_username,
                passw: null,
                newPassw: null,
                newPasswConfirm:null
            }

        },
        created() {

        },
        methods: {
            /**
             * 挂载表单保存数据前，验证方法
             * 这个方法必须有true/false返回值
             */
            formValidateHandler(model) {
                //console.log(model);
                if (model.passw != null && model.passw != "") {
                    if (model.newPassw != null && model.newPassw != ""
                        && model.newPassw.length >5 && model.newPassw.length<21) {

                        if (model.newPassw == model.newPasswConfirm) {
                            return true;
                        }else{
                            alert("新密码和确认密码不一致 ！");
                            return false;
                        }
                    }else{
                        alert("请输入新密码，且必须6~20位 ！");
                        return false;
                    }
                }else{
                    alert("请输入旧密码 ！");
                    return false;
                }
            },

            /**
             * 数据保存成功后执行
             */
            successHandler(data) {
                if(data.code == 0) {
                    this.$message.success(data.msg);
                }else{
                    this.$message.error(data.msg);
                }
            }
        }
    });

</script>
</body>
</html>